<template>
  <!-- 工单管理 -->
  <div style="margin: 15px;">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部工单" name="all">
        <AllFiles />
      </el-tab-pane>
      <el-tab-pane label="未处理工单" name="un">
        <UnFiles />
      </el-tab-pane>
      <el-tab-pane label="已处理工单" name="com">
        <ComFiles />
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
import { getAllFault, addFault, changeFault } from '@/api/fault.js'
import AllFiles from './components/AllFiles/index.vue'
import UnFiles from './components/UnFiles/index.vue'
import ComFiles from './components/ComFiles/index.vue'

export default {
  name: 'OperationDuty',
  components: {
    AllFiles, UnFiles, ComFiles
  },
  data() {
    return {
      dialogVisible: false, // 弹层是否开启
      isEdit: true, // 是否是编辑
      currentPage3: 1, // 当前页数
      tableData: [], // 表格数据
      formDate: {
        hostName: '', // 主机名
        faultDate: '', // 故障日期
        solution: '', // 解决方案
        status: '', // 是否解决
        reportedBy: '' // 记录方式
      },
      activeName: 'all'

    }
  },
  mounted() {
    this.getDutyData()
  },
  methods: {
    // 获取表格数据
    async getDutyData() {
      const res = await getAllFault()
      this.tableData = res
    },
    // 新增
    addDuty() {
      this.formDate = {
        hostName: '',
        faultDate: '',
        solution: '',
        status: '',
        resolutionTime: ''
      }
      this.dialogVisible = true
      this.isEdit = false
    },
    // 编辑
    handleEdit(index, row) {
      this.dialogVisible = true
      this.isEdit = true
      this.formDate = {
        id: row.id,
        hostName: row.hostName,
        faultDate: row.faultDate,
        solution: row.solution,
        status: row.status,
        resolutionTime: row.resolutionTime
      }
      console.log(this.formDate)
    },
    // 删除
    handleDelete(index, row) {
      console.log(index, row)
      this.$confirm('此操作将删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 弹层 取消
    cancelBtn() {
      this.dialogVisible = false
    },
    // 弹层 确认
    async verBtn() {
      this.dialogVisible = false
      // 编辑-确认
      if (this.isEdit) {
        // console.log(this.formDate)
        // 编辑接口
        await changeFault(this.formDate)
        this.$message({
          message: '编辑成功！',
          type: 'success'
        })

      // 添加-确认
      } else {
        console.log(this.formDate)
        // 添加接口
        await addFault(this.formDate)
        this.$message({
          message: '添加成功！',
          type: 'success'
        })
      }
    },
    // 分页-每页条数
    handleSizeChange(pagesize) {
      console.log(pagesize)
    },
    // 分页-页码
    handleCurrentChange(page) {
      console.log(page)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
